IZ0KEW Reticulum Node - /page/retipedia/entry.mu

Micron Document

██████╗ ███████╗████████╗██╗██████╗ ███████╗██████╗ ██╗ █████╗

██╔══██╗██╔════╝╚══██╔══╝██║██╔══██╗██╔════╝██╔══██╗██║██╔══██╗

██████╔╝█████╗ ██║ ██║██████╔╝█████╗ ██║ ██║██║███████║

██╔══██╗██╔══╝ ██║ ██║██╔═══╝ ██╔══╝ ██║ ██║██║██╔══██║

██║ ██║███████╗ ██║ ██║██║ ███████╗██████╔╝██║██║ ██║

╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝╚═╝ ╚══════╝╚═════╝ ╚═╝╚═╝ ╚═╝

🬧 The NomadNet Encyclopedia | Archives | Info

- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b

🔍 Search

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Drag and drop

12.1 KB · ⇊ 4 parts · ⤓ Micron 12.1 KB · ⤓ HTML 38.2 KB

──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

top

mwbwDrag and drop (tradotto in italiano con mwcatrascinamento)cite-ref-1[1] nel lessico informatico, indica una successione di tre azioni, consistenti nel cliccare su un oggetto virtuale (quale una mwdqfinestra o un'mwdgicona) per trascinarlo (in mwdwinglese: mweadrag) in un'altra posizione, dove viene rilasciato (in inglese: mweqdrop). Generalmente nella mweglingua italiana tale azione viene indicata semplicemente con "trascina" oppure con "clicca e trascina", anche se la traduzione letterale è "trascina e rilascia".

Contents

• Storia

• Descrizione

• Esempio

• Note

• Voci correlate

• Altri progetti

• Collegamenti esterni

Storia

Fu introdotto per la prima volta dalla mwfgApple con il sistema mwfwMacintosh 128K e in seguito evoluto con il mwgasistema operativo mwgqSystem 7.

Grazie a mwgwHTML5, il drag and drop è oggi disponibile in maniera nativa anche sui mwhabrowser che lo supportano (Nel 2021 mwhqOpera 12, mwhgMozilla Firefox 4, mwhwSafari, mwiaGoogle Chrome e, anche se non completamente, mwiqInternet Explorer 9 e 10 [obsoleti] ed mwigEdgecite-ref-2[2]) attraverso una semplice interfaccia mwjwJavaScriptcite-ref-3[3].

Descrizione

In genere, questo tipo di azione crea un qualche tipo di associazione tra due oggetti: se per esempio un'mwlgicona corrispondente a un mwlwdocumento viene trascinata sul mwmacestino, questo provoca la cancellazione del documento.

Spesso ad azioni di drag and drop corrispondono alternative via mwmgtastiera (mwmwscorciatoie o mwnashortcut) o via mwnqcomandi testuali da inserire in una mwngconsole; ad esempio in un sistema mwnwMicrosoft Windows lo spostamento di un file nel mwoacestino corrisponde alla pressione del tasto di cancellazione.

Molti mwogplugin drag and drop sono disponibili per vari mwowCMS tra cui mwpaWordPresscite-ref-4[4].

Esempio

In mwqwHTML un drag and drop base si può creare come di seguitocite-ref-0-5-0[5]:

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1 {

width: 350px;

height: 70px;

padding: 10px;

border: 1px solid #aaaaaa;

}

</style>

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>Trascina l'immagine nel rettangolo</p>

<br>

</body>

</html>

Il trascinamento della selezione HTML utilizza mwaq0DOM event model e mwaq4mwaq8drag events ereditato da mwaramouse events. Durante le operazioni di trascinamento, vengono attivati diversi tipi di eventi mwareJavaScriptcite-ref-6[6]:

| Evento | Sul gestore di eventi | Si attiva quando ... |

|---|---|---|

| drag | ondrag | … viene trascinato un elemento (elemento o selezione di testo). |

| dragend | ondragend | ... un'operazione di trascinamento termina (come il rilascio di un pulsante del mouse o il tasto Esc). |

| dragenter | ondragenter | ... un elemento trascinato entra in un obiettivo di rilascio valido. |

| dragexit | ondragexit | ... un elemento non è più l'obiettivo di selezione immediata dell'operazione di trascinamento. |

| dragleave | ondragleave | ... un elemento trascinato lascia un obiettivo di rilascio valido. |

| dragover | ondragover | ... un elemento trascinato viene trascinato su un obiettivo di rilascio valido, ogni poche centinaia di millisecondi. |

| dragstart | ondragstart | ... l'utente inizia a trascinare un elemento. |

| drop | ondrop | ... un elemento viene rilasciato su un obiettivo di rilascio valido. |

Esempio di utilizzo:

function dragstart_handler(ev) {

let img = new Image();

img.src = 'example.gif';

ev.dataTransfer.setDragImage(img, 10, 10);

}

Esempio di formattazione con i mwax4CSScite-ref-0-5-1[5]:

#drop_file_zone {

background-color: #EEE;

border: #999 5px dashed;

width: 290px;

height: 200px;

padding: 8px;

font-size: 18px;

}

#drag_upload_file {

width:50%;

margin:0 auto;

}

#drag_upload_file #selectfile {

display: none;

}

Esempio di caricamento di un file da parte di un utente su un mwadkserver attraverso PHPcite-ref-7[7]:

<?php

$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];

if (!(in_array($_FILES['file']['type'], $arr_file_types))) {

echo "false";

return;

}

if (!file_exists('uploads')) {

mkdir('uploads', 0777);

}

move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . time() . '_' . $_FILES['file']['name']);

echo "File uploaded successfully.";

Note

cite-note-11. ↑ Esempi: mwajamwajemwajiTrascinamento, su mwajminformaticapertutti.com. mwajumwajymwajcTrascinare con il mouse, su mwajgpcdazero.it. mwajomwajsmwajwTrascinare le cartelle, su mwaj0docs.alfresco.com. mwaj4URL consultato il 31 marzo 2020 mwaj8(archiviato dall'mwakaurl originale il 26 settembre 2020). mwakimwakmmwakqCreare un collegamento a una pagina web sul Desktop, su mwakusupport.mozilla.org.

cite-note-22. ↑ mwakkmwakomwaksCan I use... Support tables for HTML5, CSS3, etc, su mwakwCan I use. mwak0URL consultato il 17 febbraio 2021.

cite-note-33. ↑ mwalemwalimwalmIl drag and drop facile e nativo con HTML5 e JavaScript, su mwalqHTML5 Today. mwaluURL consultato il 20 maggio 2016 mwaly(archiviato dall'mwalcurl originale il 27 maggio 2016).

cite-note-44. ↑ mwalsmwalwmwal015 Best Drag & Drop WordPress Page Builders in 2024 Compared, su mwal4wpbeginner.com. mwal8URL consultato il 17 febbraio 2021.

cite-note-0-55. ↑ mwamu(mwamymwamcEN) mwamgmwamkUsing the HTML5 Drag and Drop API, su mwamoweb.dev. mwamsURL consultato il 17 febbraio 2021.

cite-note-66. ↑ mwam8mwanamwaneDrag Operations - Web APIs, su mwaniMDN web docs. mwanmURL consultato il 17 febbraio 2021.

cite-note-77. ↑ mwanc(mwangmwankEN) Sajid, mwanomwansDrag And Drop File Upload Using JavaScript And PHP, su mwanwArtisans Web, 23 maggio 2017. mwan0URL consultato il 17 febbraio 2021.

Voci correlate

• mwaoeInterfaccia grafica

• mwaomSistema operativo

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file sul drag and drop

Collegamenti esterni

• citerefsapere-itdrag and drop, su sapere.it, De Agostini.

↑ Back to top